<template>
    <div>
        <list-top></list-top>
        <div class="payContent">
            <div class="headNav">
                <div class="headTitle"><span class="active">{{pageTitle}}</span></div>
            </div>
            <div class="payMain" v-if="showPayMain">
                <div class="orderInfo">
                    <div class="tit">订单信息</div>
                    <div class="impor">
                        <div class="number">订单提交成功，请尽快付款！订单号：73540567894<br/>
                            <span class="tip">请您在24小时内完成支付，否则订单会被自动取消(库存紧俏订单请参见详情页时限)</span>
                        </div>
                        <div class="price">应付金额<span>325.80</span>元</div>
                    </div>
                </div>
                <div class="tit">支付方式</div>
                <div class="bankCard">
                    <div class="headTitle">
                        <span :class="{active: bodyContent.showBankCart == true}" @click="showBody('bankCart')">银行卡支付</span>
                        <span>余额支付</span>
                        <span @click="showBody('weixin')" :class="{active: bodyContent.showWeixin == true}">微信支付</span>
                        <span>支付宝支付</span>
                    </div>
                    <div v-if="bodyContent.showBankCart">
                    <div class="b-top">我的银行卡<span class="add" @click="addBankCard">绑定新银行卡</span></div>
                    <div class="CardGroup clear">
                        <div class="systemPopup-card-remove fl   systemPopup-card-l">
                            <div class="card-top">
                                <el-checkbox label="上海浦东发展银行"></el-checkbox>
                                <img src="../images/bank1.png" alt="">
                                <span>上海浦东发展银行</span>
                            </div>
                            <div class="card-number">
                                6222 **** **** 1668
                            </div>
                            <div class="card-tr1">
                                <span>信用卡</span>
                            </div>
                        </div>
                        <div class="systemPopup-card-remove fl   systemPopup-card-l">
                            <div class="card-top">
                                <el-checkbox label="上海浦东发展银行"></el-checkbox>
                                <img src="../images/bank1.png" alt="">
                                <span>上海浦东发展银行</span>
                            </div>
                            <div class="card-number">
                                6222 **** **** 1668
                            </div>
                            <div class="card-tr1">
                                <span>信用卡</span>
                            </div>
                        </div>
                        <div class="systemPopup-card-remove fl   systemPopup-card-l">
                            <div class="card-top">
                                <el-checkbox label="上海浦东发展银行"></el-checkbox>
                                <img src="../images/bank1.png" alt="">
                                <span>上海浦东发展银行</span>
                            </div>
                            <div class="card-number">
                                6222 **** **** 1668
                            </div>
                            <div class="card-tr2">
                                <span>信用卡</span>
                            </div>
                        </div>
                    </div>
                    <div class="payNum">
                        <span>请输入6位数支付密码</span>
                        <div class="numBox">
                            <input type="password" oninput="this.value=(this.value.replace(/[^0-9]+/,''))" maxlength="1" @keyup = "moveNext(payNum1,2);" ref="payNum1" v-model="payNum1">
                            <input type="password" oninput="this.value=(this.value.replace(/[^0-9]+/,''))" maxlength="1" @keyup = "moveNext(payNum2,3);" ref="payNum2" v-model="payNum2">
                            <input type="password" oninput="this.value=(this.value.replace(/[^0-9]+/,''))" maxlength="1" @keyup = "moveNext(payNum3,4);" ref="payNum3" v-model="payNum3">
                            <input type="password" oninput="this.value=(this.value.replace(/[^0-9]+/,''))" maxlength="1" @keyup = "moveNext(payNum4,5);" ref="payNum4" v-model="payNum4">
                            <input type="password" oninput="this.value=(this.value.replace(/[^0-9]+/,''))" maxlength="1" @keyup = "moveNext(payNum5,6);" ref="payNum5" v-model="payNum5">
                            <input type="password" oninput="this.value=(this.value.replace(/[^0-9]+/,''))" maxlength="1"  ref="payNum6" v-model="payNum6">
                        </div>
                        <button @click="clickPayNow">立即支付</button>
                    </div>
                    </div>
                    <div v-if="bodyContent.showWeixin">
                        <div class="ewm">
                            <div class="e-tip">距离二维码过期还剩<span>28</span>秒，过期刷新页面重新获取二维码</div>
                            <div class="ewmimgBox">
                                <img src="./images/bak02m.png" alt="">
                            </div>
                            <div class="e-tip2">
                                <img src="./images/ewmicon.png" alt="">
                                <p>请使用微信扫一扫<br/>
                                扫描二维码支付</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="payOkMain" v-if="showPayOkMain">
                <i class="iconfont icon-ok"></i>
                <div class="ok-tip">订单支付成功</div>
                <div class="operation">
                    <router-link to="/">查看订单</router-link>
                    <router-link to="/">返回首页</router-link>
                </div>
                <div class="ok-orderInfo">
                    <div><span>订单号：</span>1001020102</div>
                    <div><span>支付金额：</span>￥100.00</div>
                    <div><span>支付方式：</span>微信支付\支付宝支付\银行卡支付\余额支付</div>
                    <div><span>获得积分：</span>100分</div>
                </div>
            </div>
            <div class="system-menban" v-if="showSystemPopup"></div>
            <div class="systemPopup" v-if="showSystemPopup">
                <div class="topTitle">
                    <span>{{systemPopupTitle}}</span>
                    <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con systemPopup-cards" v-if="wealthshow9">
                    <div class="systemPopup-car">
                        <div class="systemPopup-cardss">
                            <div class="bank-cards">
                                <div class="bank-card-t">{{bank}}</div>
                                <div class="bank-card-num">{{cardNum1}} {{cardNum2}} {{cardNum3}} {{cardNum4}}</div>
                                <div class="bank-card-n clear">
                                    <span class="fl">持卡人</span>
                                    <span class="fr">到期</span>
                                </div>
                                <div class="bank-card-ts clear">
                                    <span class="fl">{{cardsName}}</span>
                                    <span class="fr">{{months}}/{{year}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="systemPopup-cardsss">
                            <div class="systemPopup-cardss-bj"></div>
                            <div class="systemPopup-cardss-ccv">
                                <div class="systemPopup-cardss-ccv-t">ccv</div>
                                <div class="systemPopup-cardss-ccv-b">{{CCV}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="bank-cards-m">
                        <p class="bank-cards-m-mar">卡号</p>
                        <div class="bank-cards-i clear">
                            <input type="text" oninput="this.value=(this.value.replace(/[^0-9]+/,''))" maxlength="4" v-model="cardNum1" ref="input1">
                            <input type="text" oninput="this.value=(this.value.replace(/[^0-9]+/,''))" maxlength="4" v-model="cardNum2" ref="input2">
                            <input type="text" oninput="this.value=(this.value.replace(/[^0-9]+/,''))" maxlength="4" v-model="cardNum3" ref="input3">
                            <input type="text" oninput="this.value=(this.value.replace(/[^0-9]+/,''))" maxlength="4" v-model="cardNum4" ref="input4">
                        </div>
                    </div>
                    <div class="bank-cards-ms">
                        <p class="bank-cards-m-mar">选择银行</p>
                        <div class="bank-cards-i">
                            <el-select v-model="bank" class="system-cards-sel">
                                <el-option v-for="item in bankDdata" :key="item.value" :value="item.bank">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="bank-cards-name">
                        <p class="bank-cards-m-mar">持卡人</p>
                        <div class="bank-cards-i">
                            <el-input v-model="cardsName" class="bank-cards-ms-i-ts"></el-input>
                        </div>
                    </div>
                    <div class="bank-cards-ms clear">
                        <div class="fl">
                            <p class="bank-cards-m-mar">到期日</p>
                            <div class="bank-cards-ms-i clear">
                                <el-select v-model="months" class="system-cards-sels">
                                    <el-option v-for="item in dateData.month" :key="item.value" :value="item.months">
                                    </el-option>
                                </el-select>
                                <el-select v-model="year" class="system-cards-sels">
                                    <el-option v-for="item in dateData.year" :key="item.value" :value="item.year">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="fr bank-cards-ms-i-t">
                            <p class="bank-cards-m-mar">CCV</p>
                            <el-input v-model="CCV" class="bank-cards-ms-i-ts"></el-input>
                        </div>
                    </div>
                    <div class="bank-cards-btn">确定</div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    import listTop from "./public/listTop";
    export default {
        components: {
            listTop,
        },
        data() {
            return {
                value5: 3,
                showSystemPopup:false,
                wealthshow9: false,
                systemPopupTitle:"",
                payNum1:"",
                payNum2:"",
                payNum3:"",
                payNum4:"",
                payNum5:"",
                payNum6:"",
                bodyContent:{
                  showBankCart:false,   //银行卡支付页面
                  showWeixin:true,  //微信支付
                },
                bankDdata: [{
                        value: "1",
                        bank: "上海浦东发展银行"
                    },
                    {
                        value: "2",
                        bank: "桂林银行"
                    },
                    {
                        value: "3",
                        bank: "中国银行"
                    },
                    {
                        value: "4",
                        bank: "平安银行"
                    },
                    {
                        value: "5",
                        bank: "兴业银行"
                    }
                ],
                dateData: {
                    month: [{
                            value: "1",
                            months: "01"
                        },
                        {
                            value: "2",
                            months: "02"
                        },
                        {
                            value: "3",
                            months: "03"
                        },
                        {
                            value: "4",
                            months: "04"
                        },
                        {
                            value: "5",
                            months: "05"
                        },
                        {
                            value: "6",
                            months: "06"
                        },
                        {
                            value: "7",
                            months: "07"
                        },
                        {
                            value: "8",
                            months: "08"
                        },
                        {
                            value: "9",
                            months: "09"
                        },
                        {
                            value: "10",
                            months: "10"
                        },
                        {
                            value: "11",
                            months: "11"
                        },
                        {
                            value: "12",
                            months: "12"
                        }
                    ],
                    year: [{
                            value: "1",
                            year: "2018"
                        },
                        {
                            value: "2",
                            year: "2019"
                        },
                        {
                            value: "3",
                            year: "2020"
                        },
                        {
                            value: "4",
                            year: "2021"
                        },
                        {
                            value: "5",
                            year: "2022"
                        },
                        {
                            value: "6",
                            year: "2023"
                        }
                    ]
                },
                bank: "", //增加银行卡中的选择银行
                months: "", //增加银行卡中的选择月份
                year: "", //增加银行卡中的选择年限
                CCV: "", //增加银行卡中的ccv
                cardsName: "", //增加银行卡中的持卡人
                cardNum1: "", //增加银行卡中的银行卡账号
                cardNum2: "",
                cardNum3: "",
                cardNum4: "",
                cardList: [],
                pageTitle:"确认支付", //页面头部标题
                showPayMain:true,  //默认显示支付页面
                showPayOkMain:false,  //显示支付成功页面
            }
        },
        mounted() {
        },
        methods: {
            hideSystemPopup() {
                this.showSystemPopup = false;
                this.wealthshow9 = false;
                this.systemPopupTitle = "";
            },
            moveNext(object,index){
                if(object.length >= 1){
                    this.$refs["payNum"+index].focus();
                }
            },
            addBankCard(){
                this.showSystemPopup = true;
                 this.wealthshow9 = true;
                 this.systemPopupTitle = "添加银行卡";
            },
            //切换付款方式
            showBody(object){
                for(var i in this.bodyContent){
                    this.bodyContent[i] = false;
                }
                if(object == "bankCart"){
                   this.bodyContent.showBankCart = true;
                }
                if(object == "weixin"){
                   this.bodyContent.showWeixin = true;
                }
            },
            //点击立即支付
            clickPayNow(){
                this.pageTitle = "支付成功"; //页面头部标题
                this.showPayMain = false;  //默认显示支付页面
                this.showPayOkMain = true;  //显示支付成功页面
            }
        },
        watch: {
            cardNum1() {
                if (this.cardNum1.length == 4) {
                    this.$refs["input2"].focus();
                }
            },
            cardNum2() {
                if (this.cardNum2.length == 4) {
                    this.$refs["input3"].focus();
                }
            },
            cardNum3() {
                if (this.cardNum3.length == 4) {
                    this.$refs["input4"].focus();
                }
            }
        }
    }
</script>

<style lang="less">
    @import "./css/pay.less";
</style>
